<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% if post %}编辑{% else %}新建{% endif %}{% if content_type == 'post' %}文章{% else %}页面{% endif %} - {{ settings.site_title }}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body class="admin-body">
    <div class="admin-layout">
        <nav class="admin-sidebar">
            <div class="sidebar-header">
                <h3>管理后台</h3>
            </div>
            <ul class="sidebar-menu">
                <li><a href="{{ url_for('admin_dashboard') }}">仪表板</a></li>
                <li><a href="{{ url_for('admin_posts') }}">文章管理</a></li>
                <li><a href="{{ url_for('admin_pages') }}">页面管理</a></li>
                <li><a href="{{ url_for('admin_settings') }}">网站设置</a></li>
                <li><a href="{{ url_for('admin_logout') }}">退出登录</a></li>
            </ul>
        </nav>

        <main class="admin-main">
            <header class="admin-header">
                <h1>{% if post %}编辑{% else %}新建{% endif %}{% if content_type == 'post' %}文章{% else %}页面{% endif %}</h1>
            </header>

            <div class="admin-content">
                <form id="editor-form" class="editor-form">
                    <input type="hidden" name="content_type" value="{{ content_type }}">
                    <input type="hidden" name="id" value="{{ post.id if post else '' }}">
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="title">标题</label>
                            <input type="text" id="title" name="title" value="{{ post.title if post else '' }}" required>
                        </div>
                        <div class="form-group">
                            <label for="slug">URL别名</label>
                            <input type="text" id="slug" name="slug" value="{{ post.slug if post else '' }}" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="published">
                            <input type="checkbox" id="published" name="published" {{ 'checked' if post and post.published else '' }}>
                            发布
                        </label>
                    </div>

                    <div class="editor-container">
                        <div class="editor-pane">
                            <div class="editor-header">
                                <h3>Markdown 编辑器</h3>
                            </div>
                            <textarea id="markdown-content" name="content" class="markdown-editor" placeholder="在此输入 Markdown 内容...">{{ post.markdown_content if post else '' }}</textarea>
                        </div>
                        
                        <div class="preview-pane">
                            <div class="editor-header">
                                <h3>实时预览</h3>
                            </div>
                            <div id="preview-content" class="preview-content"></div>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">保存</button>
                        <a href="{{ url_for('admin_posts') if content_type == 'post' else url_for('admin_pages') }}" class="btn btn-secondary">取消</a>
                    </div>
                </form>
            </div>
        </main>
    </div>

    <script>
        // 实时预览功能
        const markdownContent = document.getElementById('markdown-content');
        const previewContent = document.getElementById('preview-content');
        const form = document.getElementById('editor-form');

        // 自动生成 slug
        const titleInput = document.getElementById('title');
        const slugInput = document.getElementById('slug');

        titleInput.addEventListener('input', function() {
            if (!slugInput.value || slugInput.dataset.autoGenerated === 'true') {
                const slug = this.value.toLowerCase()
                    .replace(/[^\w\s-]/g, '')
                    .replace(/\s+/g, '-')
                    .replace(/-+/g, '-')
                    .trim('-');
                slugInput.value = slug;
                slugInput.dataset.autoGenerated = 'true';
            }
        });

        slugInput.addEventListener('input', function() {
            if (this.value) {
                this.dataset.autoGenerated = 'false';
            }
        });

        // 实时预览
        function updatePreview() {
            const content = markdownContent.value;
            fetch('/api/preview', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ content: content })
            })
            .then(response => response.json())
            .then(data => {
                previewContent.innerHTML = data.html;
            })
            .catch(error => {
                console.error('预览错误:', error);
            });
        }

        markdownContent.addEventListener('input', updatePreview);

        // 初始化预览
        if (markdownContent.value) {
            updatePreview();
        }

        // 表单提交
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(form);
            
            fetch('/admin/save_content', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    window.location.href = '{{ url_for("admin_posts") if content_type == "post" else url_for("admin_pages") }}';
                } else {
                    alert(data.message);
                }
            })
            .catch(error => {
                console.error('保存错误:', error);
                alert('保存失败，请重试');
            });
        });
    </script>
</body>
</html>
